<template>
	<div>
		<div>自己上传生成的词云</div>
		<div class="myGraph">
			<div id="mymain" class="cloudcharts" ref="wordCloudChart" style="width: 800px; height: 600px" />
		</div>
		<hr />
		<div class="myUpload">
			<el-upload class="upload-demo" ref="upload" action="" :on-change="handleChange" :on-remove="handleRemove"
				:file-list="fileList" :auto-upload="false">
				<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
				<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload()">上传
				</el-button>
				<div slot="tip" class="el-upload__tip">只能上传txt、doc文件，且不超过50MB</div>
			</el-upload>
		</div>
	</div>

</template>

<script>
	import "echarts-wordcloud/dist/echarts-wordcloud";
	import "echarts-wordcloud/dist/echarts-wordcloud.min";
	var echarts = require('echarts');
	export default {
		created() {

		},
		data() {
			return {
				fileList: [],
				words: [],
				option: '',
				myChart: ''
			}
		},
		mounted() {
			document.title = "自定义词云",
				this.initGraph();
		},
		methods: {
			submitUpload() {
				const _this = this;
				// console.log(_this.fileList.length);
				if (_this.fileList.length == 0) {
					return _this.$message.warning("请选取文件后上传!");
				}
				const params = new FormData();
				_this.fileList.forEach((file) => {
					params.append('multipartFiles', file.raw);
				})
				this.$http.post('/common/fileUpload', params).then(function(resp) {
					//后端返回成功后才能渲染词云图
					if (resp.data.code == 200) {
						_this.$message.success('上传成功');
						//清空fileList
						_this.fileList = []
						const myWordMap = resp.data.data;
						const myWords = [];
						for (let i = 0; i < myWordMap.length; i++) {
							const wordsArray = myWordMap[i].split("-*-");
							myWords.push({
								name: wordsArray[0],
								value: wordsArray[1]
							});
						}
						_this.words = myWords;
						_this.myChart.dispose();
						console.log(_this.words);
						const option = {
							series: [{
								type: 'wordCloud',
								// shape这个属性虽然可配置，但是在词的数量不太多的时候，效果不明显，它会趋向于画一个椭圆
								shape: 'circle',
								// 这个功能还没用过
								keepAspect: false,
								// 这个是可以自定义背景图片的，词云会按照图片的形状排布，所以有形状限制的时候，最好用背景图来实现，而且，这个背景图一定要放base64的，不然词云画不出来
								// maskImage: maskImage,
								// 下面就是位置的配置
								left: 'center',
								top: 'center',
								width: '70%',
								height: '80%',
								right: null,
								bottom: null,
								// 词的大小，最小12px，最大60px，可以在这个范围调整词的大小
								sizeRange: [18, 68],
								// 每个词旋转的角度范围和旋转的步进
								rotationRange: [-90, 90],
								rotationStep: 45,
								// 词间距，数值越小，间距越小，这里间距太小的话，会出现大词把小词套住的情况，比如一个大的口字，中间会有比较大的空隙，这时候他会把一些很小的字放在口字里面，这样的话，鼠标就无法选中里面的那个小字，这里可以用函数根据词云的数量动态返回间距
								gridSize: 10,
								// 允许词太大的时候，超出画布的范围
								drawOutOfBound: false,
								// 布局的时候是否有动画
								layoutAnimation: true,
								// 这是全局的文字样式，相对应的还可以对每个词设置字体样式
								textStyle: {
									fontFamily: 'sans-serif',
									fontWeight: 'bold',
									// 颜色可以用一个函数来返回字符串，这里是随机色
									color: function() {
										// Random color
										return 'rgb(' + [
											Math.round(Math.random() * 160),
											Math.round(Math.random() * 160),
											Math.round(Math.random() * 160)
										].join(',') + ')';
									}
								},
								emphasis: {
									focus: 'self',
									textStyle: {
										textShadowBlur: 10,
										textShadowColor: '#333'
									}
								},
								// 数据必须是一个数组，数组是对象，对象必须有name和value属性
								data: myWords
							}]
						}
						_this.option = option;
						_this.showCloud();
					} else {
						_this.$message.error('上传失败');
					}
				})
				// this.$refs.upload.submit();
			},
			handleRemove(file, fileList) {
				this.fileList = fileList;
			},
			handleChange(file, fileList) {
				this.fileList = fileList;
			},
			initGraph() {
				const _this = this;
				const wordmap = ["示例1", "示例2", "示例3", "示例4", "示例5", "示例6", "示例7", "示例8", "示例9", "示例10", "示例11", "示例12",
					"示例13", "示例14", "示例15", "示例16", "示例17", "示例18", "示例19", "示例20"
				];
				const words = [];
				for (let i = 0; i < 20; i++) {
					words.push({
						name: wordmap[i],
						value: i * 5 + 10
					});
				}
				const option = {
					series: [{
						type: 'wordCloud',
						// shape这个属性虽然可配置，但是在词的数量不太多的时候，效果不明显，它会趋向于画一个椭圆
						shape: 'circle',
						// 这个功能还没用过
						keepAspect: false,
						// 这个是可以自定义背景图片的，词云会按照图片的形状排布，所以有形状限制的时候，最好用背景图来实现，而且，这个背景图一定要放base64的，不然词云画不出来
						// maskImage: maskImage,
						// 下面就是位置的配置
						left: 'center',
						top: 'center',
						width: '70%',
						height: '80%',
						right: null,
						bottom: null,
						// 词的大小，最小12px，最大60px，可以在这个范围调整词的大小
						sizeRange: [18, 68],
						// 每个词旋转的角度范围和旋转的步进
						rotationRange: [-90, 90],
						rotationStep: 45,
						// 词间距，数值越小，间距越小，这里间距太小的话，会出现大词把小词套住的情况，比如一个大的口字，中间会有比较大的空隙，这时候他会把一些很小的字放在口字里面，这样的话，鼠标就无法选中里面的那个小字，这里可以用函数根据词云的数量动态返回间距
						gridSize: 10,
						// 允许词太大的时候，超出画布的范围
						drawOutOfBound: false,
						// 布局的时候是否有动画
						layoutAnimation: true,
						// 这是全局的文字样式，相对应的还可以对每个词设置字体样式
						textStyle: {
							fontFamily: 'sans-serif',
							fontWeight: 'bold',
							// 颜色可以用一个函数来返回字符串，这里是随机色
							color: function() {
								// Random color
								return 'rgb(' + [
									Math.round(Math.random() * 160),
									Math.round(Math.random() * 160),
									Math.round(Math.random() * 160)
								].join(',') + ')';
							}
						},
						emphasis: {
							focus: 'self',
							textStyle: {
								textShadowBlur: 10,
								textShadowColor: '#333'
							}
						},
						// 数据必须是一个数组，数组是对象，对象必须有name和value属性
						data: words
					}]
				}
				_this.option = option;
				_this.showCloud();
			},
			showCloud() {
				const graphShow = document.getElementById('mymain');
				this.myChart = echarts.init(graphShow, 'light');
				this.myChart.setOption(this.option);
			}
		}
	}
</script>

<style>
	.myUpload {
		display: flex;
		flex-wrap: nowrap;
		align-content: center;
		justify-content: center;
	}

	.myGraph {
		display: flex;
		flex-direction: column;
		align-content: space-around;
		flex-wrap: wrap;
	}
</style>
